<template>
	<div class="goods-list">
		<router-link :to="'/home/goodsinfo/'+item.id" class="goods-item" v-for="item in list">
			<img :src="item.img_url">
			<h1 class="title">{{item.title}}</h1>
			<div class="info">
				<p class="price">
					<span class="now">￥{{item.sell_price}}</span>
					<span class="old">￥{{item.market_price}}</span>
				</p>
				<p class="sell">
					<span>热卖中</span>
					<span>剩{{item.stock_quantity}}件</span>
				</p>
			</div>
		</router-link>
		<button class="mui-btn mui-btn-warning mui-btn-outlined mui-btn-block" @click="getmore">加载更多</button>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				pageindex:1,
				list:[]
			}
		},
		created(){
			this.goodsList()
		},
		methods:{
			goodsList(){
				this.$http.get('api/getgoods?pageindex='+this.pageindex).then(res=>{
					//console.log(res.body.message);
					this.list=this.list.concat(res.body.message)
				})
			},
			getmore(){
				this.pageindex++;
				this.goodsList()
			}
		}
	}
</script>

<style scoped>
	.goods-list{
		display: flex;
		padding: 7px;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.goods-list .goods-item{
		border: 1px solid #ccc;
		width: 49%;
		box-shadow: 0 0 8px #ccc;
		margin: 4px 0;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		min-height: 293px;
	}
	.goods-list .goods-item img{
		width: 100%;
	}
	.goods-list .goods-item .title{
		font-size: 14px;
		line-height: 19px;
		padding: 0 7px;
		color: #000000;
	}
	.goods-item .info{
		background-color: #eee;
		padding: 0 7px;
	}
	.goods-item .info .now{
		color: red;
		font-weight: 700;
		font-size: 18px;
	}
	.goods-item .info .old{
		font-size: 13px;
		text-decoration: line-through;
		margin-left: 10px;
	}
	.goods-item .info .sell{
		display: flex;
		justify-content: space-between;
		font-size: 13px;
		margin-bottom: 0;
	}
	.mui-btn-block{
		padding: 6px;
		margin-top: 10px;
	}
</style>
